<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面</title>
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <style>
        html, body, #app {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        .login_container {
            background-image: url("../images/bg.jpg");
            height: 100%;
        }

        .login_box {
            width: 450px;
            height: 300px;
            background: #fff;
            border-radius: 3px;
            position: absolute;
            left: 50%;
            top: 50%;
            box-shadow: 0 0 10px #ddd;
            transform: translate(-50%, -50%);
        }

        .login_box > .avatar_box {
            height: 130px;
            width: 130px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 10px #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
        }

        .login_box > .avatar_box > img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }

        .login_form {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;
        }

        .btns {
            display: flex;
            justify-content: flex-end;
        }

    </style>
</head>
<body>
<div id="app">
    <div class="login_container">
        <!-- 登录盒子  -->
        <div class="login_box">
            <!-- 头像 -->
            <div class="avatar_box">
                <img src="/images/logo.jpg" alt="">
            </div>
            <!-- 登录表单 -->
            <el-form :rules="loginRules" :model="loginForm" ref="LoginFormRef2" label-width="0px" class="login_form">
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <!-- 按钮 -->
                <el-form-item class="btns">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button type="info" @click="resetLogin">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>
</body>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            loginForm: {},//表达对象
            loginRules: {//表达校验规则

            }
        },
        methods: {
            login() {
                axios.post("/system/login", this.loginForm).then(result => { //产生class对象----里面的this依然是vue对象的this
                    if (result.data.code == 200) {
                        this.$message.success(result.data.msg);
                         window.location.href = "/views/main.html";//重定向----session到时间---服务器重启---浏览器关闭
                    } else {
                        this.$message.error(result.data.msg);
                    }
                })
            },
            resetLogin() {

            }
        }
    })
</script>
</html>